<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Clock</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
   <div class="clock">
    <div class="numbers">
      <div class="circle" style="--clr:#ff2972">
        <div class="dots sec_dot"></div>
        <svg>
          <circle cx="120" cy="120" r="123" id="ss"></circle>
        </svg>
      </div>
      <div class="circle" style="--clr:#cc40ec">
        <div class="dots min_dot"></div>
        <svg>
          <circle cx="100" cy="100" r="81" id="mm"></circle>
        </svg>
      </div>
      <div class="circle" style="--clr:#045dd9">
        <div class="dots hr_dot"></div>
        <svg>
          <circle cx="80" cy="80" r="65" id="hh"></circle>
        </svg>
      </div>
      <div class="noddles noddles3" style="--clr:#066af7" id="hr"><i></i></div>
      <div class="noddles noddles2" style="--clr:#cc40ec" id="mn"><i></i></div>
      <div class="noddles" style="--clr:#ff2972" id="sc"><i></i></div>
      <div class="coc"></div>
      <span style="--i:1;"><b>1</b></span>
      <span style="--i:2;"><b>2</b></span>
      <span style="--i:3;"><b>3</b></span>
      <span style="--i:4;"><b>4</b></span>
      <span style="--i:5;"><b>5</b></span>
      <span style="--i:6;"><b>6</b></span>
      <span style="--i:7;"><b>7</b></span>
      <span style="--i:8;"><b>8</b></span>
      <span style="--i:9;"><b>9</b></span>
      <span style="--i:10;"><b>10</b></span>
      <span style="--i:11;"><b>11</b></span>
      <span style="--i:12;"><b>12</b></span>
    </div>
  
   </div> 
   <script>
    setInterval(()=>{
      let hh = document.getElementById('hh');
      let mm = document.getElementById('mm');
      let ss = document.getElementById('ss');
      let sec_dot = document.querySelector('.sec_dot');
      let min_dot = document.querySelector('.min_dot');
      let hr_dot = document.querySelector('.hr_dot');
    

      let h = new Date().getHours();
      let m = new Date().getMinutes();
      let s = new Date().getSeconds();


      hh.style.strokeDashoffset = 408.41 - (408.41 * h) / 12;
      // 12 hrs clock
      mm.style.strokeDashoffset = 508.94 - (508.94 * m) / 60;
      // 60 minute
      ss.style.strokeDashoffset = 772.83 - (772.83 * s) / 60;
      // 60 seconds

      sec_dot.style.transform = `rotateZ(${s * 6}deg)`;
      // 360 / 60sec = 6
      min_dot.style.transform = `rotateZ(${m * 6}deg)`;
      // 360 / 60min = 6
      hr_dot.style.transform = `rotateZ(${h * 30}deg)`;
      // 360 / 60min = 6
    
    
      let hr = document.querySelector("#hr");
      let mn = document.querySelector("#mn");
      let sc = document.querySelector("#sc");
    
      hr.style.transform = `rotateZ(${h * 30}deg)`;
      mn.style.transform = `rotateZ(${m * 6}deg)`;
      sc.style.transform = `rotateZ(${s * 6}deg)`;
    
    })
  </script>
</body> 
</html>